<template>
<div id="p_task">
    <div  style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;position:fixed;left:0;top:0;z-index:1;">
        <tab  :line-width="1">
            <tab-item @on-item-click="$router.push('/m_task/none')" :selected="$route.path=='/m_task/none'">待办</tab-item>
            <tab-item @on-item-click="$router.push('/m_task/today')" :selected="$route.path=='/m_task/today'">日程<badge v-show="showTodayDot"></badge><sup v-show="showTodayNum"><badge :text="todayTaskNum"></badge></sup></tab-item>
            <tab-item @on-item-click="$router.push('/m_task/project')" :selected="$route.path=='/m_task/project'">项目</tab-item>
            <!-- <tab-item>游戏</tab-item> -->
        </tab>
    </div>
    <div  style="height:44px;"></div>  <!-- 配合上面div的置顶,div用来站位. -->
    <router-view ref="taskRouter" class="view" keep-alive></router-view>
    <div v-transfer-dom>
      <x-dialog v-model="showTech" class="dialog-demo">
        <div class="img-box">
            <div class="page-wrapper">
                <video id="videoInd" style="width:100%; max-height:212px;" :poster="videoPoster" :src="videoUrl" controls="controls">
                  您的浏览器不支持
                </video>
            </div>
            <!-- <img src="../../../static/z39h5/img/banner5.jpg" style="max-width:100%"> -->
        </div>
        <div v-show="closeVis" @click="closeTech">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
</div>
</template>
<script>
var showTaskIntval,showTaskLen=1 ;

import api from '../api';
import { taskAndTag  } from "./mixin";

import {mapState,mapActions} from 'vuex'

import {
    TransferDomDirective as TransferDom,
    XDialog,Badge,Tab,TabItem,Sticky
} from 'vux'

var techVideo ;
export default {
    directives: {TransferDom},
    components: {
        XDialog,Badge,Tab,TabItem,Sticky
    },
    mixins: [taskAndTag],    
    computed: {
        ...mapState({
            uid: state => state.vux.uid,
            phone: state => state.vux.phone,
            taskAll: state => state.z39.taskAll,
        })
    },
    watch: {
    },
    created() {        
    },
    mounted: function() {
        setTimeout(() => {
            this.delayShow = true;
        }, 500);
        this.$vux && this.$vux.bus && this.$vux.bus.$on('dologin', this.resetIndex);
        this.$vux && this.$vux.bus && this.$vux.bus.$on('todayNum', this.todayNumVisible);
        this.$vux && this.$vux.bus && this.$vux.bus.$on('addTodayNum', this.addTodayNum);

        this.$socket.emit('connect', "7dtime.com");
        this.showTechViddeo();
    },
    methods: {
        showTechViddeo(){
            if(localStorage.getItem("showTech1")) return ;
            let showTechDay = localStorage.getItem("showTechDay") ;
            let day = moment().format('YYYY-MM-DD') ;
            if(showTechDay ==day) return ;
            localStorage.setItem("showTechDay",day);
            this.showTech = true ;
            this.videoUrl = "static/z39h5/video/v4.0.1.mp4" ;
            this.videoPoster = "static/z39h5/img/banner5.jpg" ;
            this.tongji("task","video1","show",1);
            setTimeout(()=>{
                var myVideo=document.getElementById("videoInd");
                myVideo.addEventListener('play',()=>{
                    this.handlePlay();
                    this.closeVis = true ;
                    this.tongji("task","video1","play",2);
                });
                myVideo.addEventListener('ended',()=>{
                    this.tongji("task","video1","end",3);
                });
            },100)
        },
        resetIndex(val){
            this.timeindex = 1;
            console.log("resetIndex",val);
        },
        addTodayNum(val){
            if(showTaskIntval){
                clearTimeout(showTaskIntval);
                showTaskIntval = 0 ;
                showTaskLen ++ ;
            }
            var sdata ={num:"+"+showTaskLen,show:true};
            this.todayNumVisible(sdata);
            this.$vux.bus.$emit('todayNum', sdata);
            var time = this.phone?8000:3600000;
            showTaskIntval = setTimeout(()=>{
                this.todayNumVisible({show:false}),showTaskIntval = 0,showTaskLen=1;
                // this.$vux.bus.$emit('todayNum', {num:taskLen,show:false}),showTaskIntval = null,showTaskLen=1
            },time);
        },
        todayNumVisible(data){
            if(data.today !=undefined) this.showTodayDot = data.today ;
            if(data.show !=undefined) this.showTodayNum = data.show ;
            if(data.num !=undefined) this.todayTaskNum = data.num;
        },
        closeTech(){
            if(techVideo) techVideo.pause();
            document.getElementById("videoInd").pause();
            this.showTech=false
        },
        handlePlay(){
            localStorage.setItem("showTech1",1);
            console.log("localStorage showTech");
        },
    },
    data() {
        return {
            timeindex: 1,
            delayShow:false,
            todayTaskNum:0,
            showTodayNum:false,
            showTodayDot:false,            
            showTech:false,
            videoPoster:"",
            videoUrl:"",
            closeVis:false,
        }
    }
}

</script>
<style scoped>

.day-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.day-item-selected {
  border: 1px solid green;
}

.weui-cell img {
    max-width: 100px;
    height: 44px;
    margin-right: 10px;
    width: auto;
}
</style>

<style lang="less" scoped>
@import '~vux/src/styles/close';
#p_task .dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {

    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>